import React, { useState } from "react";
import {
  Form,
  Input,
  Select,
  DatePicker,
  Button,
  Card,
  Row,
  Col,
  Typography,
  Divider,
  Space,
  message,
  Collapse,
} from "antd";
import {
  UserOutlined,
  MailOutlined,
  PhoneOutlined,
  GlobalOutlined,
  IdcardOutlined,
  EnvironmentOutlined,
} from "@ant-design/icons";
import "./style.css";
import dayjs from "dayjs";
import type { CollapseProps } from "antd";

const { TextArea } = Input;
const { Title } = Typography;
const { Option } = Select;
const { RangePicker } = DatePicker;

const CustomerForm: React.FC = () => {
  const [form] = Form.useForm();
  const [expandSection, setExpandSection] = useState<string[]>(["1", "2"]);

  const onFinish = (values: Record<string, unknown>) => {
    console.log("提交的表单数据:", values);
    message.success("表单提交成功");
  };

  // 处理折叠面板变化
  const onCollapseChange = (key: string | string[]) => {
    setExpandSection(typeof key === "string" ? [key] : key);
  };

  // 表单项布局
  const formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  // 折叠面板项
  const items: CollapseProps["items"] = [
    {
      key: "1",
      label: <Title level={5}>拓展信息</Title>,
      children: (
        <div className="form-section">
          <Row gutter={24}>
            <Col span={8}>
              <Form.Item label="所属机构" name="organization">
                <Select defaultValue="运维岗位">
                  <Option value="运维岗位">运维岗位</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="regionOrg">
                <Select defaultValue="中国新加坡区域机构">
                  <Option value="中国新加坡区域机构">中国新加坡区域机构</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item name="subRegionOrg">
                <Select placeholder="请选择区域机构">
                  <Option value="区域1">区域1</Option>
                  <Option value="区域2">区域2</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="拓展人" name="expandPerson">
                <Input placeholder="请输入拓展人" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="所属合作方" name="partner">
                <Input placeholder="请输入所属合作方" />
              </Form.Item>
            </Col>
          </Row>
        </div>
      ),
    },
    {
      key: "2",
      label: <Title level={5}>基本信息</Title>,
      children: (
        <div className="form-section">
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="客户归属地"
                name="customerLocation"
                rules={[{ required: true, message: "请选择客户归属地" }]}
              >
                <Select defaultValue="中国香港">
                  <Option value="中国香港">中国香港</Option>
                  <Option value="中国大陆">中国大陆</Option>
                  <Option value="中国台湾">中国台湾</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="客户性质"
                name="customerNature"
                rules={[{ required: true, message: "请选择客户性质" }]}
              >
                <Select defaultValue="合资、股份制、民营">
                  <Option value="合资、股份制、民营">合资、股份制、民营</Option>
                  <Option value="国有企业">国有企业</Option>
                  <Option value="外资企业">外资企业</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="客户号" name="customerNo">
                <Input disabled defaultValue="996000000012157" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="客户名称" name="customerName">
                <Input disabled defaultValue="测试企业" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="客户英文名称" name="customerEnglishName">
                <Input defaultValue="Test the enterprise" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="企业注册证书(CR)"
                name="crNumber"
                rules={[{ required: true, message: "请输入企业注册证书号码" }]}
              >
                <Input defaultValue="00000000" prefix={<IdcardOutlined />} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="商业登记证(BR)"
                name="brNumber"
                rules={[{ required: true, message: "请输入商业登记证号码" }]}
              >
                <Input defaultValue="00000000" prefix={<IdcardOutlined />} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={24}>
              <Form.Item
                label="商业登记证有效期"
                name="brValidPeriod"
                rules={[{ required: true, message: "请选择商业登记证有效期" }]}
              >
                <RangePicker
                  style={{ width: "100%" }}
                  defaultValue={[dayjs("2024-03-13"), dayjs("2027-03-12")]}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="注册地址"
                name="registeredAddress"
                rules={[{ required: true, message: "请输入注册地址" }]}
              >
                <TextArea
                  rows={3}
                  defaultValue="address 1"
                  prefix={<EnvironmentOutlined />}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="经营范围" name="businessScope">
                <Select placeholder="请选择经营范围">
                  <Option value="range1">经营范围1</Option>
                  <Option value="range2">经营范围2</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="网站所属国家/地区" name="websiteRegion">
                <Select placeholder="请选择网站所属地区">
                  <Option value="hk">中国香港</Option>
                  <Option value="mainland">中国大陆</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="网站名称" name="websiteName">
                <Input
                  placeholder="请输入网站名称"
                  prefix={<GlobalOutlined />}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={24}>
              <Form.Item label="网站地址" name="websiteUrl">
                <TextArea rows={2} placeholder="请输入网站地址" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="联系电话"
                name="contactPhone"
                rules={[{ required: true, message: "请输入联系电话" }]}
              >
                <Input defaultValue="17722620106" prefix={<PhoneOutlined />} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="联系邮箱"
                name="contactEmail"
                rules={[
                  { required: true, message: "请输入联系邮箱" },
                  { type: "email", message: "请输入有效的邮箱地址" },
                ]}
              >
                <Input
                  defaultValue="chenxiaodai126@gmail.com"
                  prefix={<MailOutlined />}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="合同有效期"
                name="contractValidPeriod"
                rules={[{ required: true, message: "请选择合同有效期" }]}
              >
                <DatePicker
                  style={{ width: "100%" }}
                  defaultValue={dayjs("2025-04-01")}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="代理商" name="agent">
                <Input
                  placeholder="请输入代理商名称"
                  prefix={<UserOutlined />}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="企业成立日期"
                name="companyFoundingDate"
                tooltip="企业必填"
                rules={[{ required: true, message: "请选择企业成立日期" }]}
              >
                <DatePicker
                  style={{ width: "100%" }}
                  defaultValue={dayjs("2024-03-27")}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="邮编" name="postcode">
                <Input placeholder="请输入邮编" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item
                label="营业国家"
                name="businessCountry"
                tooltip="企业必填"
                rules={[{ required: true, message: "请选择营业国家" }]}
              >
                <Select defaultValue="中国香港">
                  <Option value="中国香港">中国香港</Option>
                  <Option value="中国大陆">中国大陆</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="营业地址"
                name="businessAddress"
                tooltip="企业必填"
                rules={[{ required: true, message: "请输入营业地址" }]}
              >
                <TextArea rows={3} defaultValue="address 1" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="是否收取方名单" name="isReceiver">
                <Select placeholder="请选择">
                  <Option value="yes">是</Option>
                  <Option value="no">否</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="是否有确定资源" name="hasResource">
                <Select defaultValue="是">
                  <Option value="是">是</Option>
                  <Option value="否">否</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={24}>
            <Col span={24}>
              <Form.Item label="简介" name="introduction">
                <TextArea rows={4} placeholder="请填写简介" />
              </Form.Item>
            </Col>
          </Row>
        </div>
      ),
    },
  ];

  return (
    <div className="ant-customer-form-container">
      <Card title="客户信息表单" bordered={false}>
        <Form
          form={form}
          name="customerForm"
          onFinish={onFinish}
          scrollToFirstError
          {...formItemLayout}
          initialValues={{
            customerLocation: "中国香港",
            customerNature: "合资、股份制、民营",
            customerNo: "996000000012157",
            customerName: "测试企业",
            customerEnglishName: "Test the enterprise",
            crNumber: "00000000",
            brNumber: "00000000",
            contactPhone: "17722620106",
            contactEmail: "chenxiaodai126@gmail.com",
            hasResource: "是",
          }}
        >
          <Collapse
            expandIconPosition="end"
            defaultActiveKey={expandSection}
            onChange={onCollapseChange}
            items={items}
            ghost
            bordered={false}
          />

          <Divider />

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button htmlType="button" onClick={() => form.resetFields()}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default CustomerForm;
